﻿@page "/components/swiper"

<PageOutlet Url="components/swiper"
            Title="Swiper"
            Description="swiper component of the bit BlazorUI components" />

<DemoPage Name="Swiper"
          SecondaryNames="@(["TouchSlider"])"
          Description="Swipers (touch slider) let people show their slides in a swiping row."
          Parameters="componentParameters"
          GitHubUrl="Lists/Swiper/BitSwiper.razor"
          GitHubDemoUrl="Lists/Swiper/BitSwiperDemo.razor">
    <DemoExample Title="Basic" RazorCode="@example1RazorCode" Id="example1">
        <div>
            <BitSwiper>
                @for (int i = 1; i <= 32; i++)
                {
                    var index = i;
                    var imageIndex = (index - 1) % 4 + 1;
                    <BitSwiperItem Class="item">
                        <div class="number">Item @index</div>
                        <img class="image" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img@(imageIndex).jpg" />
                    </BitSwiperItem>
                }
            </BitSwiper>
        </div>
    </DemoExample>

    <DemoExample Title="ScrollItemsCount" RazorCode="@example2RazorCode" Id="example2">
        <div>Configure BitSwiper to scroll multiple items at once.</div>
        <br />
        <div>
            <BitSwiper ScrollItemsCount="2">
                @for (int i = 1; i <= 32; i++)
                {
                    var index = i;
                    var imageIndex = (index - 1) % 4 + 1;
                    <BitSwiperItem Class="item">
                        <div class="number">Item @index</div>
                        <img class="image" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img@(imageIndex).jpg" />
                    </BitSwiperItem>
                }
            </BitSwiper>
        </div>
    </DemoExample>

    <DemoExample Title="HideNextPrev" RazorCode="@example3RazorCode" Id="example3">
        <div>Use BitSwiper without showing the next and previous navigation buttons.</div>
        <br />
        <div>
            <BitSwiper HideNextPrev ScrollItemsCount="2">
                @for (int i = 1; i <= 32; i++)
                {
                    var index = i;
                    var imageIndex = (index - 1) % 4 + 1;
                    <BitSwiperItem Class="item">
                        <div class="number">Item @index</div>
                        <img class="image" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img@(imageIndex).jpg" />
                    </BitSwiperItem>
                }
            </BitSwiper>
        </div>
    </DemoExample>

    <DemoExample Title="RTL" RazorCode="@example4RazorCode" Id="example4">
        <div>Use BitSwiper in right-to-left (RTL).</div>
        <br />
        <div>
            <BitSwiper Dir="BitDir.Rtl">
                @for (int i = 1; i <= 32; i++)
                {
                    var index = i;
                    var imageIndex = (index - 1) % 4 + 1;
                    <BitSwiperItem Class="item">
                        <div class="number">مورد @index</div>
                        <img class="image" src="_content/Bit.BlazorUI.Demo.Client.Core/images/carousel/img@(imageIndex).jpg" />
                    </BitSwiperItem>
                }
            </BitSwiper>
        </div>
    </DemoExample>
</DemoPage>